<template>
	<div class="bf-header">
		<div class="logo"></div>
		<nav class="bf-nav">
			<ul class="nav-left">
				<li>
					<img src="../assets/images/logo.png" alt="">
				</li>
				<li>{{$t('public.header.slogin')}}</li>
			</ul>
			<ul class="nav-right">
				<li v-for="item,index in $t('public.header.nav')" :key="index"  v-if="index < 3">
          <router-link :to="item.Hrouter">{{ item.name }}</router-link>
        </li>
				<li class="bf-lastli">
					<a>{{ $t('public.header.nav[3].name') }}</a>
					<div class="selecta">
						<a v-for="item,index in $t('public.header.nav[3].children')" :key="index">
              <router-link :to="item.Hrouter">{{ item.name }}</router-link>
            </a>
					</div>
				</li>
        <!-- <li @click="switchLang">{{ $t('public.header.language') }}</li>  -->
			</ul>
		</nav>
	</div>
</template>  
  
<script>
export default {
  data() {
    return {
      lang: "cn"
    };
  },
  methods: {
    switchLang() {
      if (this.lang == "en") {
        this.lang = "cn";
      } else {
        this.lang = "en";
      }
      this.$i18n.locale = this.lang;
    }
  }
};
</script>  
<style>
.bf-header {
  width: 100%;
  min-width: 1200px;
  background-color: #000318;
  position: fixed;
  z-index: 1000;
}
.bf-header .bf-nav {
  width: 1200px;
  height: 80px;
  margin: 0 auto;
  line-height: 80px;
}
.bf-header .bf-nav .nav-left {
  float: left;
  width: 40%;
  height: 100%;
  line-height: 80px;
}
.bf-header .bf-nav .nav-left li {
  float: left;
  color: #ffffff;
  line-height: 80px;
  cursor: pointer;
  font-size: 16px;
}
.bf-header .bf-nav .nav-left li:nth-child(1) {
  width: 100px;
  height: 38px;
  padding-top: 15px;
  margin-right: 30px;
}
.bf-header .bf-nav .nav-right {
  float: right;
  min-width: 50%;
}
.bf-header .bf-nav .nav-right .active {
  background: url(../assets/images/hover.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.bf-header .bf-nav .nav-right li {
  float: left;
  color: #fff;
  min-width: 130px;
  text-align: center;
  cursor: pointer;
  font-size: 18px;
}
.bf-header .bf-nav .nav-right li a {
  /*background: #4b96ff;*/
  color: #fff;
  display: block;
}
.bf-header .bf-nav .nav-right li .selectca {
  width: 150px;
  height: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border: 0;
  color: #fff;
  padding-left: 40px;
}
.bf-header .bf-nav .nav-right li .selecta {
  display: none;
  position: absolute;
  width: 100%;
  z-index: 10;
}
.bf-header .bf-nav .nav-right .bf-lastli {
  position: relative;
}
.bf-header .bf-nav .nav-right .bf-lastli:hover a {
  background-color: #4b96ff;
}
.bf-header .bf-nav .nav-right .bf-lastli:hover .selecta {
  display: block;
}
.bf-header .bf-nav .nav-right .bf-lastli:hover .selecta .active {
  background-color: #3d7aff;
}
</style> 